<template>
	<view>
		<!-- 固定头部区域 -->
		<view class="fixed-header">
			<back :showBackText="false" customClass="bg-gradual-blue text-white" :showTitle="true" title="选择专业"></back>
			<scroll-view scroll-x class="bg-white nav text-center" v-if="cateData.length > 0">
				<view class="flex text-center">
					<view :class="'cu-item flex-sub ' + (cate.id == cateId ? 'text-orange cur' : '')" @tap="changeTap"
						:data-id="cate.id" v-for="(cate, index) in cateData" :key="index">
						{{ cate.name }}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 可滚动内容区域 -->
		<view v-if="load == true && allListData.length > 0" class="flex flex-direction scrollable-content" style="min-height: 100vh;">
			<view class="flex-sub" style="margin-bottom: 270rpx;">
				<view class="cu-list menu">
					<view class="cu-item arrow" @tap="professionTap" :data-data="professionItem"
						v-for="(professionItem, index) in listData" :key="index">
						<view class="content">
							<text class="cuIcon-read text-pink"></text>
							<text class="">{{ professionItem.name }}</text>
						</view>
						<view class="action" v-if="professionItem.old_name">
							<text class="text-sm">原{{ professionItem.old_name }}</text>
						</view>
					</view>
				</view>
			</view>
			<adfootbanner></adfootbanner>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	let that = null;
	export default {
		data() {
			return {
				customBar: this.CustomBar,
				currentCity: {},
				currentExam: {},
				currentSchool: {},
				load: false,
				cateData: [],
				listData: [],
				allListData: [],
				cateId: 0,
				cate: {
					id: '',
					name: ''
				},

				professionItem: {
					name: '',
					old_name: ''
				}
			};
		},
		onReady() {

		},
		onLoad(options) {
			that = this;
			that.initCityAndExam(options);
			that.getProfessionList();
		},
		methods: {
			initCityAndExam(options) {
				that.currentCity = app.globalData.config.storage.getCurrentCityData();
				that.currentExam = app.globalData.config.storage.getCurrentExamData();
				if (options.hasOwnProperty('exam_id')) {
					that.currentExam = {
						id: options.exam_id,
						name: options.exam_name
					};
				}
				if (options.hasOwnProperty('school_id')) {
					that.currentSchool = {
						id: options.school_id,
						name: options.school_name
					};
					that.title = options.school_name;
				} else {
					that.currentSchool = {
						id: 0,
						name: ''
					};
				}
			},
			getProfessionList() {
				app.globalData.server
					.getRequest('profession/get', {
						exam_id: that.currentExam.id,
						province_id: that.currentCity.id,
						school_id: that.currentSchool.id
					})
					.then(function(res) {
						that.setData({
							load: true,
							cateData: res.data.new_cate,
							allListData: res.data.list
						});

						if (that.allListData) {
							that.setListData();
						}
					});
			},

			setListData() {
				let cateId = that.cateId;
				let allListData = that.allListData;

				if (cateId == 0 && that.cateData.length > 0) {
					cateId = that.cateData['0'].id;
					that.cateId = cateId;
				}

				if (cateId == 0) {
					that.listData = allListData;
				} else {
					let newListData = [];
					for (var i = 0; i < allListData.length; i++) {
						if (allListData[i].category_id == cateId) {
							newListData.push(allListData[i]);
						}
					}
					that.listData = newListData;
				}
			},

			/**
			 * 选中专业事件
			 */
			async professionTap(options) {
				let professionData = options.currentTarget.dataset.data;
				app.globalData.config.storage.setFristData(2);
				app.globalData.config.storage.setCurrentExamData(that.currentExam);
				app.globalData.config.storage.setCurrentProfessionData(professionData);
				uni.reLaunch({
					url: '../index'
				});
			},

			/**
			 * 专业类别切换事件
			 */
			changeTap(options) {
				let id = options.currentTarget.dataset.id;
				that.setData({
					cateId: id
				});
				that.setListData();
			}
		}
	};
</script>
<style src="./profession.css"></style>